<%@ page import="com.lagou.demo.pojo.Classes" %>
<%@ page import="java.util.List" %>
<%@ page import="com.lagou.demo.pojo.Student" %><%--
  Created by IntelliJ IDEA.
  User: wait
  Date: 2021/7/22
  Time: 16:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>班级信息管理界面</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet"/>
    <script src="./js/jquery-3.3.1.min.js" type="text/javascript"></script>
    <script src="./js/bootstrap.min.js" type="text/javascript"></script>
</head>
<style type="text/css">
    .pagination_div {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
<%--班级模块--%>
<div class="table-responsive"  style="padding-left:100px ">
    <%-- 绘制一个10行7列的表格用于展示所有班级信息，最开始没有班级信息时表格中数据全部为空即可，让表格填充整个页面 --%>
    <table class="table">
        <%-- 提供相关功能对应的按钮，其中增加和修改操作共用同一个模态框即可，其它操作通过JS来处理 --%>
        <caption>
            <button class="btn btn-info" id="class_page">显示班级</button>
            <button class="btn btn-info" id="class_add" data-toggle="modal" data-target="#myModalClass">添加班级</button>
            <button class="btn btn-info" id="class_delete">删除班级</button>
            <button class="btn btn-info" id="class_modify" data-toggle="modal" data-target="#myModalClass">修改班级</button>
            <button class="btn btn-info" id="class_find">查询班级</button>
            <input type="text" id="s_code1" placeholder="按班级号查询" style="width: 130px; height: 33px">
        </caption>

        <%-- 绘制1行7列的表头信息 --%>
        <thead>
        <tr>
            <th>选择</th>
            <th>班级号</th>
            <th>班级名称</th>
            <th>年级</th>
            <th>班主任名字</th>
            <th>口号</th>
            <th>班级人数</th>
        </tr>
        </thead>
        <tbody id="tbody"></tbody>


        <%-- 获取内置对象session中存储的班级信息放入的所有学生信息 --%>
        <%
            List<Classes> classesList = (List<Classes>)session.getAttribute("classesList");
            for (int i = 0; i < classesList.size(); i++) {
        %>
        <tr>
            <td><input type="checkbox" value="<%= classesList.get(i).getId() %>"/></td>
            <td> <%= classesList.get(i).getId() %> </td>
            <td> <%= classesList.get(i).getClassName() %> </td>
            <td> <%= classesList.get(i).getGrade() %> </td>
            <td> <%= classesList.get(i).getTeacherName() %> </td>
            <td> <%= classesList.get(i).getWatchWord() %> </td>
            <td> <%= classesList.get(i).getNumber() %> </td>

        </tr>
        <%
            }
        %>
    </table>

    <!-- 管理班级信息的模态框（Modal） -->
    <div class="modal " id="myModalClass" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal" aria-hidden="true">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabelClassAdd">
                        班级信息
                    </h4>
                </div>
                <form action="ClassAddServlet" method="post">
                    <input type="hidden" id="flag" name="flag"/>
                    <div class="modal-body" id="modalClass-body">
                        <%-- <label for="name">班级号:</label>
                         <input type="text" class="form-control" id="m_id" name="id" placeholder="请输入班级号">--%>
                         <label for="name">班级名字:</label>
                         <input type="text" class="form-control" id="m_className" name="className" placeholder="请输入班级名字">
                         <label for="name">年级:</label>
                         <input type="text" class="form-control" id="m_grade" name="grade" placeholder="请输入年级">
                         <label for="name">班主任名字:</label>
                         <input type="text" class="form-control" id="m_teacherName" name="teacherName" placeholder="请输入班主任名字">
                         <label for="name">口号:</label>
                         <input type="text" class="form-control" id="m_watchWord" name="watchWord" placeholder="口号">
                         <label for="name">班级人数:</label>
                         <input type="text" class="form-control" id="m_number" name="number" placeholder="班级人数">
                     </div>
                     <div class="modal-footer">
                         <button type="submit" class="btn btn-primary" >保存</button>
                         <button type="reset" class="btn btn-default" data-dismiss="modal">取消</button>
                     </div>
                 </form>
             </div>
         </div>
     </div>
 </div>

 <div class="pagination_div">

     <ul class="pagination">
         <%
             // 声明一个局部变量i负责来实现当前页和上一页以及下一页的控制
             int i = 1;
             // 声明一个变量来获取总页数
             int len = classesList.size()/10+1;
         %>

         <li><a href="classPageQueryServlet?page=<%=(i>1?--i:i)%>">&laquo;上一页</a></li>
         <%
             // 循环显示所有页码
             for (int j = 1; j <= len; j++) {
         %>
         <li><a href="classPageQueryServlet?page=<%=j%>" id=<%=j%>> <%=j%> </a></li>
         <%--<li class="active"><a href="studentPageQueryServlet?page=<%=i%>" id=<%=i%>> <%=i%> </a></li>--%>
        <%
                //}
            }
        %>
        <li><a href="classPageQueryServlet?page=<%=(i<len?++i:i)%>">&raquo;下一页</a></li>
        <%--<li><a href="#">总共<%=len%>页</a></li>--%>
    </ul>
</div>
</div>

<%--学生模块--%>
<div>
    <div class="table-responsive"  style="padding-left:100px ">
        <%-- 绘制一个10行7列的表格用于展示所有学生信息，最开始没有学生信息时表格中数据全部为空即可，让表格填充整个页面 --%>
        <table class="table">
            <%-- 提供相关功能对应的按钮，其中增加和修改操作共用同一个模态框即可，其它操作通过JS来处理 --%>
            <caption>
                <button class="btn btn-info" id="student_page">显示学生</button>
                <button class="btn btn-info" id="student_add" data-toggle="modal" data-target="#myModal">增加学生</button>
                <button class="btn btn-info" id="student_delete">删除学生</button>
                <button class="btn btn-info" id="student_modify" data-toggle="modal" data-target="#myModal">修改学生</button>
                <button class="btn btn-info" id="student_find">查询学生</button>
                <input type="text" id="s_code" placeholder="按学号查询" style="width: 130px; height: 33px">
            </caption>

            <%-- 绘制1行7列的表头信息 --%>
            <thead>
            <tr>
                <th>选择</th>
                <th>学号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>出生日期</th>
                <th>邮箱</th>
                <th>备注</th>
                <th>班级编号</th>
            </tr>
            </thead>
            <tbody id="tbody"></tbody>


            <%-- 获取内置对象session中存储的学生信息放入的所有学生信息 --%>
            <%
                List<Student> studentList = (List<Student>)session.getAttribute("studentList");
                for (int  j= 0; j < studentList.size(); j++) {
            %>
            <tr>
                <td><input type="checkbox" value="<%= studentList.get(j).getId() %>"/></td>
                <td> <%= studentList.get(j).getId() %> </td>
                <td> <%= studentList.get(j).getName() %> </td>
                <td> <%= studentList.get(j).getSex() %> </td>
                <td> <%= studentList.get(j).getBirthday() %> </td>
                <td> <%= studentList.get(j).getEmail() %> </td>
                <td> <%= studentList.get(j).getComments() %> </td>
                <td> <%= studentList.get(j).getClassNumber() %> </td>
            </tr>
            <%
                }
            %>
        </table>

        <!-- 管理学生信息的模态框（Modal） -->
        <div class="modal " id="myModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal" aria-hidden="true">
                            <span>&times;</span>
                        </button>
                        <h4 class="modal-title" id="myModalLabelAdd">
                            学生信息
                        </h4>
                    </div>
                    <form action="studentAddServlet" method="post">
                        <input type="hidden" id="flag2" name="flag"/>
                        <div class="modal-body" id="modal-body">
                            <label for="name">姓名:</label>
                            <input type="text" class="form-control" id="m_name" name="name" placeholder="请输入姓名">
                            <label for="name">性别:</label>
                            <input type="text" class="form-control" id="m_sex" name="sex" placeholder="请输入性别">
                            <label for="name">出生日期:</label>
                            <input type="text" class="form-control" id="m_birthday" name="birthday" placeholder="请输入出生日期">
                            <label for="name">邮箱:</label>
                            <input type="text" class="form-control" id="m_mail" name="mail" placeholder="请输入邮箱">
                            <label for="name">备注:</label>
                            <input type="text" class="form-control" id="m_comments" name="comments" placeholder="请输入备注">
                            <label for="name">班级编号:</label>
                            <input type="text" class="form-control" id="m_classNumber" name="classNumber" placeholder="请输入备注">
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary" >保存</button>
                            <button type="reset" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="pagination_div">

        <ul class="pagination">
            <%
                // 声明一个局部变量i负责来实现当前页和上一页以及下一页的控制
                int j = 1;
                // 声明一个变量来获取总页数
                int lenth = studentList.size()/10+1;
            %>

            <li><a href="studentPageQueryServlet?page=<%=(j>1?--j:j)%>">&laquo;上一页</a></li>
            <%
                // 循环显示所有页码
                for (int k = 1; k <= lenth; k++) {
            %>
            <li><a href="studentPageQueryServlet?page=<%=k%>" id=<%=k%>> <%=k%> </a></li>
            <%--<li class="active"><a href="studentPageQueryServlet?page=<%=i%>" id=<%=i%>> <%=i%> </a></li>--%>
            <%
                    //}
                }
            %>
            <li><a href="studentPageQueryServlet?page=<%=(j<lenth?++j:j)%>">&raquo;下一页</a></li>
            <%--<li><a href="#">总共<%=len%>页</a></li>--%>
        </ul>

    </div>
</div>
</body>
</html>

<script type="text/javascript">
    <%--班级模块--%>
    // 显示班级
    $("#class_page").on("click", function () {
        // 获取模块路径信息：/module01/manageStudent.jsp
        var modulePathName = window.document.location.pathname;
        // 获取模块名称：/module01
        var moduleName = modulePathName.substring(0, modulePathName.substr(1).indexOf('/') + 1);
        // 拼接结果为：id=1&id=2
        window.location.href = moduleName + "/classPageQueryServlet";
    });

    // 增加班级
    $("#class_add").on("click", function (flag) {
        $("#flag").val("add");
         alert($("#flag").val());
    });

    // 修改班级
    $("#class_modify").on("click", function (flag) {
        var checkboxs = $("input[type='checkbox']:checked");
        // 处理用户没有勾选的情况
        if (checkboxs.length == 0) {
            alert("请选择一个班级！");
            return false;
        } else if (checkboxs.length > 1) {
            alert("只能选择一个班级！");
            return false;
        } else {
            $("#flag").val(checkboxs[0].value);
        }
    });

    // 删除班级
    $("#class_delete").on("click", function() {
        // 获取勾选的复选框
        var checkboxs = $("input[type='checkbox']:checked");
        // 根据勾选的复选框就后面对应的值拼接起来
        var idsString = "";
        for(var i = 0; i < checkboxs.length; i++) {
            idsString += "id="+checkboxs[i].value;
            if(i != checkboxs.length-1){
                idsString += "&";
            }
        }
        // 处理用户没有勾选的情况
        if (checkboxs.length==0) {
            alert("请选择一个班级！");
        } else {
            // 获取模块路径信息：/module01/manageStudent.jsp
            var modulePathName = window.document.location.pathname;
            // 获取模块名称：/module01
            var moduleName = modulePathName.substring(0, modulePathName.substr(1).indexOf('/') + 1);
            // 拼接结果为：id=1&id=2
            window.location.href = moduleName + "/classDeleteServlet?" + idsString;
        }
    });

    // 查询班级
    $("#class_find").on("click", function() {
        var codeLike = $(this).siblings("#s_code1").val();
        if (0 == codeLike.length) {
            alert("必须输入班级号！");
            return false;
        }else if(/^\d{0,4}$/g.test(codeLike)){
            // 获取模块路径信息：/module01/manageStudent.jsp
            var modulePathName = window.document.location.pathname;
            // 获取模块名称：/module01
            var moduleName = modulePathName.substring(0, modulePathName.substr(1).indexOf('/') + 1);
            // 拼接结果为：id=1&id=2
            window.location.href = moduleName + "/classQueryServlet?id=" + codeLike;
        }else{
            alert("班级号必须是数字");
        }
    });


    <%--学生模块--%>
    // 显示学生
    $("#student_page").on("click", function () {
        // 获取模块路径信息：/module01/manageStudent.jsp
        var modulePathName = window.document.location.pathname;
        // 获取模块名称：/module01
        var moduleName = modulePathName.substring(0, modulePathName.substr(1).indexOf('/') + 1);
        // 拼接结果为：id=1&id=2
        window.location.href = moduleName + "/studentPageQueryServlet";
    });

    // 增加学生
    $("#student_add").on("click", function (flag) {
        $("#flag").val("add");
    });

    // 修改学生
    $("#student_modify").on("click", function (flag) {
        var checkboxs = $("input[type='checkbox']:checked");
        // 处理用户没有勾选的情况
        if (checkboxs.length == 0) {
            alert("请选择一个学生！");
            return false;
        } else if (checkboxs.length > 1) {
            alert("只能选择一个学生！");
            return false;
        } else {
            $("#flag").val(checkboxs[0].value);
        }
    });

    // 删除用户
    $("#student_delete").on("click", function() {
        // 获取勾选的复选框
        var checkboxs = $("input[type='checkbox']:checked");
        // 根据勾选的复选框就后面对应的值拼接起来
        var idsString = "";
        for(var i = 0; i < checkboxs.length; i++) {
            idsString += "id="+checkboxs[i].value;
            if(i != checkboxs.length-1){
                idsString += "&";
            }
        }
        // 处理用户没有勾选的情况
        if (checkboxs.length==0) {
            alert("请选择一个用户！");
        } else {
            // 获取模块路径信息：/module01/manageStudent.jsp
            var modulePathName = window.document.location.pathname;
            // 获取模块名称：/module01
            var moduleName = modulePathName.substring(0, modulePathName.substr(1).indexOf('/') + 1);
            // 拼接结果为：id=1&id=2
            window.location.href = moduleName + "/studentDeleteServlet?" + idsString;
        }
    });

    // 查询学生
    $("#student_find").on("click", function() {
        var codeLike = $(this).siblings("#s_code").val();
        if (0 == codeLike.length) {
            alert("必须输入学号！");
            return false;
        }else if(/^\d{0,4}$/g.test(codeLike)){
            // 获取模块路径信息：/module01/manageStudent.jsp
            var modulePathName = window.document.location.pathname;
            // 获取模块名称：/module01
            var moduleName = modulePathName.substring(0, modulePathName.substr(1).indexOf('/') + 1);
            // 拼接结果为：id=1&id=2
            window.location.href = moduleName + "/studentQueryServlet?id=" + codeLike;
        }else{
            alert("学号必须是数字");
        }
    });
</script>
